<template>
	<view class="page">
		<view class="top">
			<view class="top_title">
				健康卡卡片颜色说明
			</view>
			<view class="top_text">
				<text> 人员分类卡片共有3中颜色，</text>
				<text class="textb">绿色健康卡，在体温监测正常、防护条件具备的条件下，正常出入。</text>
				<text>防控部门将根据卡片类型进行人员管控。</text>
			</view>
		</view>
		<view class="item1">
			<view class="item1_con">
				<view class="item1_left">
					<view class="item1_leftTop">
						集中隔离
					</view>
					<view class="name">
						张三
					</view>
					<view class="left_Text">您好！为了您的健康安全和疫情防控需要，</view>
					<view class="left_Text">请您到指定的集中隔离医学观察点，</view>
					<view class="left_Text">实行集中隔离。</view>
					<view class="left_Text">
						{{nowDate}}
					</view>
					<view class="left_Text2">非常时期，健康第一，服从安排，共抗疫情。</view>
					<view class="left_Text2">咨询电话:12121212。</view>
				</view>
				<view class="item1_right">
					<view class="right_text">
						集中隔离
					</view>
					<view>
						您好！为了您的健康安全和疫情防控需要，请您到指定的集中隔离医学观察点，实行集中隔离。
					</view>
				</view>
			</view>
		</view>
		<view class="item2">
			<view class="item1_con">
				<view class="item2_left">
					<view class="item1_leftTop">
						居家隔离
					</view>
					<view class="name">
						张三
					</view>
					<view class="left_Text">您好！为了您的健康安全和疫情防控需要，</view>
					<view class="left_Text">请您实行居家隔离医学观察。</view>
					<view class="left_Text">
						{{nowDate}}
					</view>
					<view class="left_Text2">非常时期，健康第一，服从安排，共抗疫情。</view>
					<view class="left_Text2">咨询电话:12121212。</view>
				</view>
				<view class="item1_right">
					<view class="right_text">
						居家隔离
					</view>
					<view>
						您好！为了您的健康安全和疫情防控需要，请您实行居家隔离医学观察。
					</view>
				</view>
			</view>
		</view>
		<view class="item3">
			<view class="item1_con">
				<view class="item3_left">
					<view class="item1_leftTop">
						正常
					</view>
					<view class="name">
						张三
					</view>
					<view class="left_Text">防控疫情，人人有责，</view>
					<view class="left_Text">请您继续做好个人防护。</view>
					<view class="left_Text">
						{{nowDate}}
					</view>
					<view class="left_Text2">非常时期，健康第一，服从安排，共抗疫情。</view>
					<view class="left_Text2">咨询电话:12121212。</view>
				</view>
				<view class="item1_right">
					<view class="right_text">
						正常
					</view>
					<view>
						防控疫情，人人有责，请您继续做好个人防护。
					</view>
				</view>
			</view>
		</view>
		<view :class="{'btn2':bgType,'btn':!bgType}" @click="myCard">
			{{btnTitle}}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				nowDate: '',
				count: 6,
				countC: 6,
				bgType: false,
				btnTitle: '我已完整阅读，下一步',
				btnTitleC: '我已完整阅读，下一步',
				toMyCard:''
			}
		},
		methods: {
			changeTitle: function() {
				var that = this
				var time = setInterval(() => {

					if (this.count == 1) {
						this.bgType = false
						clearInterval(time)
						this.btnTitle = this.btnTitleC,
						this.toMyCard = 'ok'
					} else {
						this.count--
						this.bgType = true
						this.btnTitle = this.btnTitleC + '(' + this.count + 's' + ')'
					}
				}, 1000)
			},
			date() {


			},
			myCard:function(){
				if(this.toMyCard=='ok'){
					uni.redirectTo({
						url:'../myCard/myCard'
					})
				}
			}
		},
		onLoad() {
			let date = new Date();
			let year = date.getFullYear(); // 年
			let month = date.getMonth() + 1; // 月
			let day = date.getDate(); // 日
			let week = date.getDay(); // 星期
			let weekArr = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
			let hour = date.getHours(); // 时
			hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
			let minute = date.getMinutes(); // 分
			minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
			let second = date.getSeconds(); // 秒
			second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
			this.nowDate = `${month}月${day}日 ${hour}:${minute}:${second}}`;
		},
		onShow() {
			this.date()
			this.changeTitle()
		}
	}
</script>

<style lang="scss">
	.page {
		width: 100%;
		height: 100%;
		padding-bottom: 50rpx;
	}

	.top {
		width: 90%;
		height: 260rpx;
		margin-left: 5%;
	}

	.top_title {
		width: 100%;
		height: 100rpx;
		font-size: 40rpx;
		font-weight: bold;
		text-align: center;
	}

	.textb {
		font-weight: bold;

		font-size: 30rpx;
		letter-spacing: 5rpx;
	}

	.top_text {
		width: 100%;
		height: 100%;

	}

	.item1 {
		width: 90%;
		margin-left: 5%;
		height: 300rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 30rpx;
		background: #FEF0F0;
	}

	.item2 {
		width: 90%;
		margin-left: 5%;
		height: 300rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 30rpx;
		background: #FDF6EC;
	}

	.item3 {
		width: 90%;
		margin-left: 5%;
		height: 300rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 30rpx;
		background: #DBF1E1;
	}

	.item1_con {
		width: 95%;
		height: 80%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.item1_left {
		width: 40%;
		height: 100%;
		color: white;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: #FA3534;
		border-radius: 10rpx;
	}

	.item2_left {
		width: 40%;
		height: 100%;
		color: white;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: #F29100;
		border-radius: 10rpx;
	}

	.item3_left {
		width: 40%;
		height: 100%;
		color: white;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: #18B566;
		border-radius: 10rpx;
	}

	.item1_leftTop {
		font-size: 20rpx;
		margin-top: 20rpx;
		font-weight: bold;
	}

	.left_Text2 {
		flex: 1;
		font-size: 10rpx;
		display: flex;
		width: 100%;
		justify-content: center;
		align-items: center;
	}

	.left_Text,
	.name {
		flex: 1;
		font-size: 13rpx;
		display: flex;
		width: 100%;
		justify-content: center;
		align-items: center;
	}

	.item1_right {
		width: 55%;
		height: 100%;
	}

	.right_text {
		font-size: 35rpx;
		font-weight: bold;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
	}

	.btn {
		width: 90%;
		height: 100rpx;
		background: #2979FF;
		margin-top: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: white;
		font-size: 35rpx;
		margin-left: 5%;
		border-radius: 7rpx;
	}

	.btn2 {
		width: 90%;
		height: 100rpx;
		background: #A0CFFF;
		margin-top: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: white;
		font-size: 35rpx;
		margin-left: 5%;
		border-radius: 7rpx;
	}
</style>
